<!DOCTYPE html>
<head>
  <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
  <title>Flakes</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="/common.css">
  <script src="/ui/js/common.js"></script>
  <script src="/bower_components/webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="/ui/elements/cats-app.html">
  <link rel="import" href="/ui/elements/flake_detection/rank_flakes.html">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <style type="text/css">
    html {
      margin: 0;
      height: 100%;
    }

    body {
      margin: 0;
      height: 100%;
      overflow-y: auto;
      overflow-x: hidden;
    }

    table, tr, td {
      border: 0px;
    }

    #footer {
      margin-top: 10px;
      float: left;
    }

    #link-to-test-history {
      float: right;
      padding-right: 50px;
    }
  </style>
  <script>

    function requestFilteredResults(e) {
      var key = e.which;
      if (key == 13) {
        submitForm();
      }
    };

    $(function() {
      $(document).on('keydown', function(event){
        if (event.key == '?') {
          event.preventDefault();
          displayMessage(600);
        }
      });

      $('#flake_filter').keypress(requestFilteredResults);

      document.getElementById('app').userInfo = {{ (user_info or {}) | tojson | safe }};
    });
  </script>
</head>
<body>
  <cats-app id="app" components="Infra>Test>Flakiness" page-header="Findit: Flakes ranked by negative impact (last 7 days)">
    {% if error_message %}
    <div style="font-weight:bold; color: red">{{ error_message }}</div>
    {% endif %}
    <div id="link-to-test-history">
      <a href="https://test-results.appspot.com/dashboards/flakiness_dashboard.html" target="_blank"><b>Link to Legacy Flakiness Dashboard</b></a>
    </div>
    <br>
    <rank-flakes
      flakes='{{flakes_data | tojson}}'
      weights='{{flake_weights | tojson}}'
      luci_project='{{luci_project}}'
      n='{{n}}'
      cursor='{{cursor}}'
      prev_cursor='{{prev_cursor}}'
      bug_id='{{bug_id}}'
      monorail_project='{{monorail_project}}'
      flake_filter='{{flake_filter}}'
      filter_names='{{filter_names | tojson}}'
    ></rank-flakes>
    <br>
    <div id="footer">
      * For more information on how flaky tests and flake occurrences are defined and detected, please refer to <a href='https://chromium.googlesource.com/infra/infra/+/master/appengine/findit/docs/flake_detector.md'>documentation</a>.
    </div>
  </cats-app>
</body>
